<template>
	<view>
		<view style="padding: 0 40rpx;background-color: #FFFFFF;">
		  <u--form
		      labelPosition="left"
		      ref="form1"
			  :model="list"
		  >
		    <u-form-item
		        labelAlign="center"
		        label="姓名"
		        prop="userInfo.name"
		        :borderBottom="false"
		        borderBottom
		        ref="item1"
		        labelWidth="200"
		        :labelStyle="{'font-size':'50rpx'}"
		    >
		      <u--input
		          placeholder="请输入姓名"
		          border="none"
		          width="300"
				  v-model="list.userInfo.name"
				  disabledColor="#ffffff"
				  disabled
		      ></u--input>
		    </u-form-item>
		    <u-form-item
		        labelAlign="center"
		        label="手机号码"
		        prop="userInfo.mobile"
		        borderBottom
		        ref="item1"
		        labelWidth="200"
		
		    >
		      <u--input
		          placeholder="请输入手机号码"
		          border="none"
		          width="300"
				  type="number"
				  v-model="list.userInfo.mobile"
			  	  disabledColor="#ffffff"
				  disabled
		      ></u--input>
		    </u-form-item>
		    <u-form-item
		        labelAlign="center"
		        label="报修位置"
		        prop="userInfo.location"
		        borderBottom
		        ref="item1"
		        labelWidth="200"
		
		    >
		      <u--input
		          placeholder="请填写位置(如:房号)"
		          border="none"
		          width="300"
				  v-model="list.userInfo.location"
				  disabledColor="#ffffff"
				  disabled
		      ></u--input>
		    </u-form-item>
			<u-form-item
			    labelAlign="center"
			    label="报修状态"
			    prop="userInfo.location"
			    borderBottom
			    ref="item1"
			    labelWidth="200"
					
			>
			<u-tag text="已处理" size="mini" v-if="list.userInfo.status == 2" type="success" shape="circle"></u-tag>
			<u-tag text="待处理" size="mini" v-if="list.userInfo.status == 1" type="primary" shape="circle"></u-tag>
			 <!-- <u--input
			      placeholder="请填写位置(如:房号)"
			      border="none"
			      width="300"
				  v-model="list.userInfo.location"
				  disabledColor="#ffffff"
				  disabled
			  ></u--input> -->
			</u-form-item>
		    <u-form-item
		        labelAlign="center"
		        label="报修原因"
		        prop="userInfo.mark"
		        borderBottom
		        ref="item1"
		        labelWidth="200"
		
		    >
		      <!-- <u--input
		          placeholder="请填写报修原因"
		          border="none"
		          width="300"
		      ></u--input> -->
		      <u--textarea height="100rpx" placeholder="请填写报修原因" confirm-type="send" v-model="list.userInfo.content" disabledColor="#ffffff" disabled></u--textarea>
		    </u-form-item>
		    <u-form-item
		        labelAlign="center"
		        label="报修图片"
		        borderBottom
		        ref="item1"
		        labelWidth="200"
		
		    >
		     <!-- <u-upload
		        :fileList="fault_list"
				@afterRead="afterRead"
				@delete="deletePic"
				name="3"
				multiple
				:maxCount="3"
				:previewFullImage="true"
				width="150"
				height="150"
		      ></u-upload> -->
					<u--image v-for="(item,index) in list.userInfo.fault_list" :key="index" width="150" height="150" @click='imgPreview(list.userInfo.fault_list,index)'  :src="item" ></u--image>
		    </u-form-item>
			<u-form-item
			    labelAlign="center"
			    label="报修完成图片"
			    borderBottom
			    ref="item1"
			    labelWidth="200"
					
			>
			<u--image v-for="(item,index) in fileList" :key="index" width="150" height="150" @click='btnphoto'  :src="item" v-if="list.userInfo.status == 1"></u--image>
			<u--image v-for="(item,index) in list.userInfo.complete_list" :key="index" width="150" height="150" @click='imgPreview(list.userInfo.complete_list,index)'  :src="item" v-else></u--image>
			</u-form-item>
		<!--  <u-form-item 
		  			    labelAlign="center"
		  			    label="评价星级"
		  			    prop="userInfo.star"
		  			    borderBottom
		  			    ref="item1"
		  			    labelWidth="200"
						v-if="list.userInfo.status == 3"
		  			>
		  			  <u-rate :size="40" :count="count" v-model="list.userInfo.star" readonly ></u-rate>
		  			</u-form-item> -->
		  			<!-- <u-form-item
		  			    labelAlign="center"
		  			    label="评价内容"
		  			    prop="userInfo.mark"
		  			    borderBottom
		  			    ref="item1"
		  			    labelWidth="200"
						v-if="list.userInfo.status == 3"
		  					
		  			>
		  			  <u--textarea height="100rpx" placeholder="请填写评价内容" confirm-type="send" v-model="list.userInfo.rate_content" disabledColor="#ffffff" disabled ></u--textarea>
		  			</u-form-item> -->
		  </u--form>
		</view>
		<view style="margin-top: 40rpx;padding: 0 20rpx;" @click="submit" v-if="list.userInfo.status == 1">
		  <u-button type="primary" size="large">维修完成</u-button>
		  <!-- <u-button type="success" style="margin-top: 10px;" @click="btn" size="large">返回</u-button> -->
		</view>
	</view>
</template>

<script>
	import Api from '@/util/api.js'
	export default {
		data() {
			return {
				id:'',
				count: 5,
				list:{
					userInfo:{
						// name:'小名',
						// mobile:'13433397750',
						// location:'A01',
						// content:'门把手坏了'
					}
				},
				fileList: [''],
				fault_list: [
					"http://127.0.0.1:8012/upload/attachment/12/cca5746488e098e3b9afa569dbe83b.jpg",
					"http://127.0.0.1:8012/upload/attachment/d3/4b03a8ea6a20fd4cc36b1b7b1b8b23.jpg"
				      // {
				      //   "id": 31,
				      //   "name": "Screenshot_2022-11-03-13-37-40-983_com.tencent.mm.jpg",
				      //   "category": "image",
				      //   "admin_id": 251,
				      //   "user_id": 0,
				      //   "url": "/upload/attachment/12/cca5746488e098e3b9afa569dbe83b.jpg",
				      //   "width": "1080",
				      //   "height": "2340",
				      //   "type": "jpg",
				      //   "size": 441810,
				      //   "mime": "image/jpeg",
				      //   "storage": "public",
				      //   "sha1": "0358ea99d139eb29568e241175faa84e8d050708",
				      //   "create_time": "2022-11-11 11:23:05",
				      //   "update_time": "2022-11-11 11:23:05",
				      //   "category_desc": "图片",
				      //   "storage_desc": "本地",
				      //   "link": "http://127.0.0.1:8012/upload/attachment/12/cca5746488e098e3b9afa569dbe83b.jpg"
				      // },
				      // {
				      //   "id": 32,
				      //   "name": "Screenshot_2022-11-09-17-34-33-847_com.zxl.wechatqr.jpg",
				      //   "category": "image",
				      //   "admin_id": 251,
				      //   "user_id": 0,
				      //   "url": "/upload/attachment/d3/4b03a8ea6a20fd4cc36b1b7b1b8b23.jpg",
				      //   "width": "1080",
				      //   "height": "2340",
				      //   "type": "jpg",
				      //   "size": 689473,
				      //   "mime": "image/jpeg",
				      //   "storage": "public",
				      //   "sha1": "0e153408a6fda5b0fe3048016cc1214aea9600f1",
				      //   "create_time": "2022-11-11 11:23:05",
				      //   "update_time": "2022-11-16 09:38:11",
				      //   "category_desc": "图片",
				      //   "storage_desc": "本地",
				      //   "link": "http://127.0.0.1:8012/upload/attachment/d3/4b03a8ea6a20fd4cc36b1b7b1b8b23.jpg"
				      // }
				    ],
			};
		},
		onLoad(e) {
			console.log('id',e)
			var that = this
			
			if('id' in e){
				that.id = e.id
				that.getRepairDetail(e.id)
			}
		},
		onShow() {
			var that = this
			that.checkUser()
		},
		methods:{
			// 修改报修记录
		  async	submit(e){
				var that = this
				var fileList = that.fileList;
				var fault_img  = []
				var formData = {
						category:'un',
						admin_id:that.userInfo.id
				}
				uni.showLoading({
					title: '加载中'
				});
				for (let item of fileList) {
					if(item != ''){
					await Api.getUpload(item,'fee_date',formData).then(res=>{
							console.log('res',res)
							if(res.data != []){
								fault_img.push(res.data.detail.id)
							}
							// that.img = res.data.detail.link
							// that.list.userInfo.avatar = res.data.detail.link
						})
					}
				}
				var data = {
					id:that.id,
					status:2,
					complete_img:fault_img
				}
				
			  await	Api.saveRepair(data).then(res=>{
				  console.log('提交成功',res)
				  uni.hideLoading();
				  that.getRepairDetail(that.id)
			  })
			},
			
			// 获取报修详情
			getRepairDetail(e){
				var that = this
				var data = {
					id:e
				}
				uni.showLoading({
					title: '加载中'
				});
				Api.getRepairDetail(data).then(res=>{
					console.log('获取成功',res)
					that.list.userInfo = res.data
					uni.hideLoading();
				})
			},
			// 选择图片
			btnphoto() {
				var that=this;
					uni.chooseImage({
						count: 3, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album'], //从相册选择
						success: function (res) {
							console.log('临时图片路径',res)
								if(res.tempFilePaths.length == 3){
									console.log('我进来了')
									that.fileList = res.tempFilePaths;
								}else if(res.tempFilePaths.length == 2){
									// that.fileList.unshift(res.tempFilePaths[0]);
									that.fileList = res.tempFilePaths;
									that.fileList.push('')
								}else if(res.tempFilePaths.length == 1){
									// that.fileList = ;
									if(that.fileList.length <= 3){
										that.fileList.splice(that.fileList.length-1,0,res.tempFilePaths[0])
									}else{
										that.fileList.splice(that.fileList.length-2,1)
										that.fileList.splice(that.fileList.length-1,0,res.tempFilePaths[0])
									}
								}
								if(that.fileList.length == 4){
									that.fileList.splice(that.fileList.length-1,1,)
								}
								console.log(that.fileList);
							
										  
						}
					});
			},
			// 点击预览图片
			imgPreview(list,idx){
				// 图片预览
				var that = this
				var list = list
				console.log('我被点击了')
				// const imgPreview = (list, idx) => {
				    // list：图片 url 数组
				    // if(list && list.length > 0){
				        uni.previewImage({
				            current:idx,    //  传 Number H5端出现不兼容
				            urls: list
				        });
				    // }
				// }
			},
			
			// 检查用户信息
			checkUser(){
				var that  = this
				var userInfo = that.userInfo;
					if(localStorage.getItem('userInfo')){
						that.userInfo = JSON.parse(localStorage.getItem('userInfo'))
					}else{
						uni.showToast({
						    icon: 'none',   
						    duration: 3000,
						    title: "当前用户未登录"
						});
						return;
					}
				
				
			},
		}
	}
</script>

<style lang="scss">

</style>
